<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML表格与表单应用示例</h1>
    <p>展示HTML表格和表单标签的实用示例与说明</p>

    <h2>1. 表格标签说明</h2>
    <p>HTML表格用于展示行列数据，由以下主要标签构成：</p>
    <ul>
        <li><strong>&lt;table&gt;</strong>：定义表格容器</li>
        <li><strong>&lt;caption&gt;</strong>：定义表格标题</li>
        <li><strong>&lt;thead&gt;</strong>：定义表头部分</li>
        <li><strong>&lt;tbody&gt;</strong>：定义表格主体内容</li>
        <li><strong>&lt;tfoot&gt;</strong>：定义表格脚注</li>
        <li><strong>&lt;tr&gt;</strong>：定义表格行</li>
        <li><strong>&lt;th&gt;</strong>：定义表头单元格</li>
        <li><strong>&lt;td&gt;</strong>：定义标准单元格</li>
    </ul>
    <p><strong>表格的作用：</strong>表格是组织和展示结构化数据的有效方式，常用于数据报表、产品比较、价格列表等场景。</p>

    <h2>2. 表单标签说明</h2>
    <p>HTML表单用于收集用户输入，由以下主要标签构成：</p>
    <ul>
        <li><strong>&lt;form&gt;</strong>：定义表单容器</li>
        <li><strong>&lt;fieldset&gt;</strong>：将相关表单元素分组</li>
        <li><strong>&lt;legend&gt;</strong>：定义字段组的标题</li>
        <li><strong>&lt;label&gt;</strong>：定义表单控件的标签</li>
        <li><strong>&lt;input&gt;</strong>：定义各种输入控件</li>
        <li><strong>&lt;select&gt;</strong>：定义下拉选择列表</li>
        <li><strong>&lt;textarea&gt;</strong>：定义多行文本输入</li>
        <li><strong>&lt;button&gt;</strong>：定义可点击按钮</li>
    </ul>
    <p><strong>表单的作用：</strong>表单是用户与网站交互的主要方式，用于登录、注册、搜索、提交数据等场景。</p>

    <h2>3. 员工信息表格示例</h2>
    <table>
        <caption>公司员工信息表</caption>
        <thead>
            <tr>
                <th>工号</th>
                <th>姓名</th>
                <th>部门</th>
                <th>职位</th>
                <th>入职日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>E001</td>
                <td>张明</td>
                <td>技术部</td>
                <td>前端工程师</td>
                <td>2020-03-15</td>
            </tr>
            <tr>
                <td>E002</td>
                <td>李华</td>
                <td>市场部</td>
                <td>营销经理</td>
                <td>2019-07-22</td>
            </tr>
            <tr>
                <td>E003</td>
                <td>王芳</td>
                <td>人事部</td>
                <td>HR专员</td>
                <td>2021-01-10</td>
            </tr>
            <tr>
                <td>E004</td>
                <td>赵强</td>
                <td>财务部</td>
                <td>财务分析师</td>
                <td>2018-11-05</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">注：此表格展示了公司部分员工的基本信息</td>
            </tr>
        </tfoot>
    </table>

    <h2>4. 员工信息收集表单示例</h2>
    <form action="/employee-handler" method="POST">
        <fieldset>
            <legend>员工信息登记</legend>
            <label for="empId">工号:</label>
            <input type="text" id="empId" name="empId" required placeholder="请输入工号">
            <label for="fullName">姓名:</label>
            <input type="text" id="fullName" name="fullName" required placeholder="请输入姓名">
            <label for="department">部门:</label>
            <select id="department" name="department" required>
                <option value="">--请选择部门--</option>
                <option value="tech">技术部</option>
                <option value="market">市场部</option>
                <option value="hr">人事部</option>
                <option value="finance">财务部</option>
            </select>
            <label for="position">职位:</label>
            <input type="text" id="position" name="position" required placeholder="请输入职位">
            <label for="joinDate">入职日期:</label>
            <input type="date" id="joinDate" name="joinDate" required>
            <label>员工类型:</label>
            <input type="radio" id="fulltime" name="empType" value="fulltime" checked>
            <label for="fulltime">全职</label>
            <input type="radio" id="parttime" name="empType" value="parttime">
            <label for="parttime">兼职</label>
            <input type="radio" id="intern" name="empType" value="intern">
            <label for="intern">实习生</label>
            <label>技能特长(可多选):</label>
            <input type="checkbox" id="programming" name="skills" value="programming">
            <label for="programming">编程</label>    
            <input type="checkbox" id="design" name="skills" value="design">
            <label for="design">设计</label>
            <input type="checkbox" id="management" name="skills" value="management">
            <label for="management">管理</label> 
            <input type="checkbox" id="communication" name="skills" value="communication">
            <label for="communication">沟通</label>
            <label for="resume">上传简历:</label>
            <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">
            <label for="notes">备注:</label>
            <textarea id="notes" name="notes" rows="4" placeholder="请输入其他相关信息..."></textarea>
            <button type="submit">提交信息</button>
            <button type="reset">重置表单</button>
        </fieldset>
    </form>
    <p><strong>表格与表单的应用场景：</strong></p>
    <ul>
        <li><strong>表格</strong>适用于展示结构化数据，如员工列表、产品目录、数据报表等</li>
        <li><strong>表单</strong>适用于收集用户输入，如注册信息、搜索查询、联系信息等</li>
        <li>两者结合可以创建完整的数据管理系统，如员工管理系统、产品库存系统等</li>
    </ul>
    <footer>
        <p>HTML表格与表单应用示例</p>
        <p>本示例展示了HTML表格和表单标签的基本用法和实际应用</p>
    </footer>
</body>
</html>